<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="用户名称" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入用户名称"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="预约日期" prop="status">
            <el-col :span="11">
              <el-date-picker :rows="6" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
                              v-model="queryParams.time" style="width: 200px;"></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="审核状态"
              clearable
              style="width: 240px"
            >
              <el-option :key="0" label="未完成" :value="0"/>
              <el-option :key="1" label="已完成" :value="1"/>
            </el-select>
          </el-form-item>


          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索
            </el-button>
          </el-form-item>
        </el-form>
        <el-table :data="consultationList" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="userName" label="就诊名称" align="center"/>
          <el-table-column  v-if="false" prop="id" label="id" align="center" hidden/>
          <el-table-column prop="time" label="预约时间" align="center"/>
          <el-table-column prop="slot" label="时间段" align="center"/>
          <el-table-column prop="detailDesc" label="备注" align="center"/>
          <el-table-column prop="endTime" label="就诊完成时间" align="center"/>
          <el-table-column prop="commentDef" label="是否评价" align="center">
            <template slot-scope="scope">
              <el-button type="warning" plain v-if="scope.row.commentDef == '1'" @click="showEvaluate(scope.row)">查看评价</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-button type="success"  @click="showDetail(scope.row)" plain v-if="scope.row.status == '1'">就诊信息</el-button>
            </template>

          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template v-if="scope.row.status === '0'" slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="addDetail(scope.row)"
              >完成就诊</el-button>

            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-pagination
      :page-size.sync="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      :current-page.sync="queryParams.pageNum"
      @current-change="getList"
      @size-change="getList"
    />

    <el-dialog title="用户评价" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="exchangeForm"  label-width="200px">
        <el-row>
          <el-col :span="24">

            <el-form-item label="用户评分：">
              <el-rate
                v-model="exchangeForm.servicePoint"
                show-score
                disabled
                text-color="#ff9900"
                score-template="{value}">
              </el-rate>
            </el-form-item>

            <el-form-item label="评价内容：">
              <el-input readonly style="width: 300px"  v-model="exchangeForm.content" type="textarea"></el-input>
            </el-form-item>

          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="detailOpen" width="600px" append-to-body>
      <el-form ref="form" :model="formDetail" :rules="rulesDetail" label-width="150px">
        <el-row>
          <el-col :span="24">

            <el-form-item label="病情描述" prop="describe">
              <el-input
                v-model="formDetail.describe"
                placeholder="请输入病情描述"
                maxlength="30"
                :disabled="showDetailFlag"
                type="textarea"
              />
            </el-form-item>

            <el-form-item label="开药信息" prop="drugInformation">
              <el-input
                v-model="formDetail.drugInformation"
                placeholder="请输入开药信息"
                maxlength="30"
                :disabled="showDetailFlag"
                type="textarea"
              />
            </el-form-item>

            <el-form-item v-if="!showDetailFlag" label="附件" prop="fileList">
              <el-upload
                :file-list="formDetail.fileList"
                class="upload-demo"
                list-type="picture"
                drag
                name="img"
                action="upload"
                :on-remove="fileRemove"
                :limit="1"
                :http-request="handleUpload"
                :on-exceed="onExceed"
              >
                <i class="el-icon-upload" />
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
              </el-upload>
            </el-form-item>
            <el-form-item v-if="showDetailFlag" label="就诊图片">
              <el-image  :src="imgSrc">
              </el-image>
            </el-form-item>


          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button  @click="cancelDetail">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import {addVisitRecord, allConsultationList, getUserExchangeLog, getVisitRecode,download} from "@/api/consultation/consultation";

export default {
  name: "visitLog",
  data() {
    let self = this;
    return {
      uploadURL: undefined,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
      },
      title: '',
      // 是否显示弹出层
      open: false,
      detailOpen: false,
      imgSrc:undefined,
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: true,
      // 用户表格数据
      consultationList: null,
      // 总条数
      total: 0,
      showDetailFlag:false,
      // 选中数组
      ids: [],
      // 表单参数
      form: {},
      rulesDetail: {
        describe: [
          {required: true, message: '病情描述不能为空', trigger: 'blur'}
        ],
        drugInformation: [
          {required: true, message: '药品信息不能为空', trigger: 'blur'}
        ],
        fileList: [
          {required: true, message: '图片信息不能为空', trigger: 'blur'}
        ]
      },
      formDetail: {
        fileList:[]
      },
      exchangeForm:{},
      fileList: []
    }
  },
  watch: {},
  created() {
    this.getList()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    fileRemove(file, fileList) {
      this.formDetail.fileList.pop()
    },
    handleUpload(fileList) {
      this.formDetail.fileList = fileList.file
    },
    onExceed() {
      this.$message.error('只能上传一个图片')
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    getList() {
      this.loading = true
      allConsultationList(this.queryParams).then((response) => {
        this.consultationList = response.list
        this.total = response.total
        this.loading = false
      })
    },

    // 表单重置
    reset() {
      this.exchangeForm = {
        servicePoint: undefined,
        content: undefined,
      },
        this.formDetail={
          fileList:[],
          describe:undefined,
          drugInformation:undefined
        }
      this.resetForm('form')
    },
    /** 添加积分 */
    showEvaluate(row) {
      this.reset()
      this.open = true
      let self = this;
      getUserExchangeLog(row.id).then((response) => {
        self.exchangeForm.servicePoint = response.servicePoint;
        self.exchangeForm.content = response.content;
      })
    },
    addDetail(row) {
      this.reset()
      this.detailOpen = true
      this.ids = row.id,
        this.title ='添加就诊信息'
    },
    showDetail(row) {
      this.reset()
      this.detailOpen = true
      this.ids = row.id;
      this.showDetailFlag = true
      this.title ='查看就诊信息';
      getVisitRecode( this.ids ).then((response) => {
        this.formDetail.describe = response.describe;
          this.formDetail.drugInformation =response.drugInformation;
          this.formDetail.filepath =   response.filepath
        download(this.formDetail.filepath).then((response) => {
          let url = window.URL.createObjectURL(response);
          this.imgSrc = url
        })
      })

    },
    cancelDetail(){
      this.detailOpen = false;
      this.fileRemove();
      this.showDetailFlag = false
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {

          addVisitRecord(this.formDetail.fileList,this.ids, this.formDetail.describe,this.formDetail.drugInformation).then((response) => {
            this.$modal.msgSuccess('新增成功')
            this.detailOpen = false
            this.getList();
          })


        }
      })
    },
    beforeUpload(file) {//判断头像大小
      const isJPG = file.type == 'image/png'||file.type=='image/jpg'||file.type=='image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 5;
      // console.log(file);
      if (!isJPG) {
        this.$message.error('上传的图片只能是 JPG/JPEG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传的图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
  }
}
</script>

<style scoped>

</style>
